<template>
	<view class="container">
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" class="tab"></v-tabs>
		<view class="coupon" ref="coupon">
			<view class="item" v-for="(v,index) in couponList" :key="index" @click="toCoupon(index)">
				<view class="top">
					<view class="left">
						<image :src="v.icon" class="icon" mode="widthFix"></image>
						<view class="name">{{ v.name }}</view>
					</view>
					<view class="right">免费领取</view>
				</view>
				<view class="bottom">
					<image :src="v.bannerPic" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						icon: '/static/all.png',
						text: '全部',
						tabId: 0,
					},
					{
						icon: '/static/ele.png',
						text: '饿了么',
						tabId: 1,
					},
					{
						icon: '/static/meituan.png',
						text: '美团',
						tabId: 2,
					}],
				couponList: [],
				coupons:[{
						name: '饿了么红包',
						icon: '/static/coupon/ele.png',
						bannerPic: '/static/coupon/ele_banner.png',
						url: 'https://s.click.ele.me/U49cAsu',
						tabId: 1,
						minapp: {
							appid: 'wxece3a9a4c82f58c9',
							path: 'pages/sharePid/web/index?scene=https://s.click.ele.me/U49cAsu'
						}
					},
					{
						name: '美团外卖红包',
						icon: '/static/coupon/meituan.png',
						bannerPic: '/static/coupon/meituan_banner.png',
						url: 'http://dpurl.cn/kOlrJ5C',
						tabId: 2,
						minapp: {
							appid: 'wxde8ac0a21135c07d',
							path: '/index/pages/h5/h5?weburl=https%3A%2F%2Frunion.meituan.com%2Furl%3Fkey%3D049bff4c149d08c7f8c867a2e6e689ee%26url%3Dhttps%253A%252F%252Fi.meituan.com%252Fawp%252Fhfe%252Fblock%252Fa13b87919a9ace9cfab4%252F89400%252Findex.html%253Fappkey%253D049bff4c149d08c7f8c867a2e6e689ee%253Azhegesidshisuibianxiedema123456%26sid%3Dzhegesidshisuibianxiedema123456&lch=cps:waimai:5:049bff4c149d08c7f8c867a2e6e689ee:zhegesidshisuibianxiedema123456&f_token=1&f_userId=1'
						}
					},
					{
						name: '饿了么果蔬',
						icon: '/static/coupon/ele.png',
						bannerPic: '/static/coupon/ele_guosu.png',
						url: 'https://s.click.ele.me/HYtV5su',
						tabId: 1,
						minapp: {
							appid: 'wxece3a9a4c82f58c9',
							path: 'pages/sharePid/web/index?scene=https://s.click.ele.me/HYtV5su'
						}
					}],
			}
		},
		onLoad() {
			this.changeTab(0);
		},
		methods: {
			changeTab(index) {
				console.log('当前选中的' + index);
				/* 清空数组 */
				this.couponList = []
				/* 设置加载菊花 */
				uni.showLoading({
					title:'获取优惠中'
				});
				/* 数组放置元素 */
				if (index == 0) {
					this.couponList = this.coupons
				} else{
					for (let i in this.coupons) {
						if (this.coupons[i].tabId == this.tabs[index].tabId) {
							this.couponList.push(this.coupons[i])
						}
					}
				}
				
				setTimeout(() => {
					uni.hideLoading()
				}, 200)
			},
			toCoupon(index) {
				if (this.couponList[index].minapp) {
					wx.navigateToMiniProgram({
						appId: this.couponList[index].minapp.appid,
						path: this.couponList[index].minapp.path,
						success(res) {
							// 打开成功
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.container {
		font-size: 14px;
		line-height: 24px;
		position: relative;
	
		.tab {
			position: fixed;
			top: var(--window-top);
			left: 0;
			z-index: 9999;
		}
		
		.coupon {
			padding-top: 200rpx;
			
			.item {
				background-color: #FFFFFF;
				margin: 30rpx;
				border-radius: 10rpx;
				padding: 0 30rpx 30rpx 30rpx;
				
				.top {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.left {
						
						display: flex;
						
						.icon {
							display: inline-block;
							vertical-align: bottom;
							width: 52rpx;
							height: auto;
						}
						
						.name {
							text-align: left;
							display: inline-block;
							font-size: 34rpx;
							color: #000;
							line-height: 50rpx;
							height: 50rpx;
							font-weight: bold;
							margin-left: 15rpx;
						}
					}
					
					.right {
						width: 170rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: linear-gradient(90deg, #ec6f43, #ea4a36);
						color: #fff;
						font-size: 28rpx;
						line-height: 60rpx;
						text-align: center;
					}
				}
				
				.bottom {
					height: auto;
					width: 100%;
					
					image {
						display: block;
						width: 100%;
						height: auto;
					}
				}
			}
		}
		
	}

</style>
